import { defineStore } from 'pinia'

export const useDeviceStore = defineStore('device', {
  state: () => ({
    isMobile: false,
    isTablet: false,
    isDesktop: true,
    screenWidth: 0,
    screenHeight: 0,
    orientation: 'portrait'
  }),
  
  actions: {
    checkDevice() {
      // 获取屏幕宽度
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      
      // 根据屏幕宽度判断设备类型
      if (this.screenWidth < 768) {
        this.isMobile = true
        this.isTablet = false
        this.isDesktop = false
      } else if (this.screenWidth >= 768 && this.screenWidth < 1024) {
        this.isMobile = false
        this.isTablet = true
        this.isDesktop = false
      } else {
        this.isMobile = false
        this.isTablet = false
        this.isDesktop = true
      }
      
      // 获取屏幕方向
      this.orientation = this.screenWidth > this.screenHeight ? 'landscape' : 'portrait'
    },
    
    // 监听窗口大小变化
    setupResizeListener() {
      window.addEventListener('resize', () => {
        this.checkDevice()
      })
      
      // 初始化时执行一次检查
      this.checkDevice()
    }
  },
  
  getters: {
    currentDevice: (state) => {
      if (state.isMobile) return 'mobile'
      if (state.isTablet) return 'tablet'
      return 'desktop'
    }
  }
})